<script setup lang="ts">
import { useUserstore } from '@/stores/userStore.ts'
import { onMounted } from 'vue'
const useuser = useUserstore()
onMounted(() => {
  useuser.useUserInfo()
})
const gettime = () => {
  const date = new Date()
  let time = ''
  const hour = date.getHours()
  if (hour >= 11 && hour <= 2) {
    time = '中午好'
  } else if (hour >= 5 && hour < 12) {
    time = '早上好'
  } else if (hour > 2 && hour <= 6) {
    time = '下午好'
  } else {
    time = '晚上好'
  }
  return time
}
</script>

<template>
  <div>
    <el-card>
      <div class="box">
        <img :src="useuser.userInfo.avatar" alt="" class="avatar" />
        <div class="bottom">
          <h3 class="title">{{ gettime() }}呀{{ useuser.userInfo.name }}</h3>
          <p class="subtitle">硅谷甄选运营平台</p>
        </div>
      </div>
    </el-card>
    <div class="bottoms">
      <SvgIcon title="welcome" width="800px" height="400px"></SvgIcon>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .bottom {
    margin-left: 20px;

    .title {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 30px;
    }

    .subtitle {
      font-style: italic;
      color: skyblue;
    }
  }
}
.bottoms {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
